<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/personalInfo.css">
    <script src="../../js/rem.js"></script>
    <title>个人信息页面</title>
</head>

<body>
    <div class="main ">
        <!-- 顶部 -->
        <header class="top text-center">
            <div class="left"> < </div>
            <div class="">个人信息</div>
            <div class="right">完成</div>
        </header>
        <!-- 个人信息 -->
        <form class="banner" enctype="multipart/form-data">
            <!-- 头像\性别 \密码\昵称-->

            <div class="headPortrait text-center">
                <i>
                    <img src="../../images/timg.jpg" alt="">
                </i>
                <input class="camera" type="file" accept="image/*" capture="camera" >
            </div>


            <!-- 生日\日期 -->
            <div class="midInfo">
                <div class="nickName">
                    <div>
                        <label for="">昵称 :</label>
                        <input type="text">
                    </div>
                </div>
                <div class="sex">
                    <div>
                        <label for="">性别 :</label>
                        <input type="radio" name="gender" value="option1" checked> 女
                        <input type="radio" name="gender" value="option2"> 男
                    </div>
                </div>
                <div class="birthday">
                    <div>
                        <label for="">生日 :</label>
                        <input type="text" id="date" data-options="{'type':'YYYY-MM-DD','beginYear':1960,'endYear':2008}">
                    </div>
                </div>
            </div>
            <!-- 城市 -->
            <div class="city">
                <p>请选择您所在城市</p>
                <div class="info">
                    <div>
                        <select id="s_province" name="s_province"></select>
                        <select id="s_city" name="s_city"></select>
                        <select id="s_county" name="s_county"></select>
                    </div>
                    <div id="show"></div>
                </div>
            </div>
            <!-- 个人私密信息 -->
            <!-- botmInfo -->
            <div class="botmInfo">
                <p>以下信息不会公开</p>
                <div class="tel">
                    <div>
                        <label for="">手机 :</label>
                        <input type="text">
                    </div>
                </div>
                <div class="email">
                    <div>
                        <label for="">邮箱 :</label>
                        <input type="text">
                    </div>
                </div>
                <div class="QQ">
                    <div>
                        <label for="">Q Q :</label>
                        <input type="text">
                    </div>
                </div>
                <div class="weibo">
                    <div>
                        <label for="">微博 :</label>
                        <input type="text">
                    </div>
                </div>
            </div>
            </from>
            </div>



            <script src="../../js/jquery-1.12.1.min.js"></script>
            <script src="../../js/jquery.date.js"></script>
            <script class="resources library" src="../../js/area.js" type="text/javascript"></script>
            <script type="text/javascript">_init_area();</script>

            <script>
                $.date('#date'); 
            </script>
            <script type="text/javascript">

                var Gid = document.getElementById;

                var showArea = function () {

                    Gid('show').innerHTML = "<h3>省" + Gid('s_province').value + " - 市" +

                        Gid('s_city').value + " - 县/区" +

                        Gid('s_county').value + "</h3>"

                }

                // Gid('s_county').setAttribute('onchange','showArea()');

            </script>
            <script>
                $(".headPortrait i").click(function () {
                    $(".headPortrait .camera").trigger("click");
                });
                $(".glyphicon-remove-circle").click(function () {
                    $(this).parent().find('input').val("");
                });
                $(".top .left").click(function () {
                    history.go(-1);
                });
                $(".camera").click(function () {
                    console.log("input")
                })
            </script>
            <script>
                $(function () {
                    $(".camera").click(); //隐藏了input:file样式后，点击头像就可以本地上传
                    $(".camera").on("change", function () {
                        var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
                        if (objUrl) {
                            $(".headPortrait img").attr("src", objUrl); //将图片路径存入src中，显示出图片
                            // $("#bigPic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
                        }
                    });
                });
                //建立一個可存取到該file的url
                function getObjectURL(file) {
                    var url = null;
                    if (window.createObjectURL != undefined) { // basic
                        url = window.createObjectURL(file);
                    } else if (window.URL != undefined) { // mozilla(firefox)
                        url = window.URL.createObjectURL(file);
                    } else if (window.webkitURL != undefined) { // webkit or chrome
                        url = window.webkitURL.createObjectURL(file);
                    }
                    return url;
                }
            </script>

</body>

</html>